<template>
  <el-row :gutter="20" type="flex" class="el-row-bg">
    <el-col :span="6">
      <el-tree
        ref="leftTree"
        class="filter-tree"
        :data="stationtree"
        :props="treetemplate"
        node-key="name"
        empty-text="暂无名称"
        default-expand-all
        highlight-current
        @node-click="selectclass"
      />
    </el-col>
    <el-col :span="14">
      <el-col :span="20">
        <div :id="id" ref="myEchart" :class="className" :style="{height:height,width:width}" />
      </el-col>
      <el-col :span="20">
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="selectitem"
        >
          <el-table-column
            prop="id"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="name"
            label="中文名"
            width="180"
          />
          <el-table-column
            prop="company"
            label="单位"
          />
          <el-table-column
            prop="value"
            label="值"
          />
          <el-table-column
            prop="time"
            label="采样时间"
          />
        </el-table>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>

import { mapState } from 'vuex'
import echarts from 'echarts'
// import WebSocket from './WebSocket.js' //注意路径
export default {
  name: 'VStationRealtimeChart',
  props: {
    className: {
      type: String,
      default: 'yourClassName'
    },
    id: {
      type: String,
      default: 'yourID'
    },
    width: {
      type: String,
      default: '500px'
    },
    height: {
      type: String,
      default: '500px'
    },
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null,
      treetemplate: {
        children: 'children',
        label: 'name'
      },
      stationtree: [],
      tableData: [],
      echartvalue: [],
      option: null,
      ws: null,
      time: null
    }
  },
  computed: {
    ...mapState({
      service: state => state.service
    }),
    displaycategory() {
      return null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  async created() {
    const result = await this.service.getStationLayoutInfo(this.value)
    if (result.flag) {
      this.stationtree =
      [{ ...result.data[0].station, children: result.data[0].point }] || []
    }
    this.ws = new WebSocket(process.env.VUE_APP_WEBSOCKET)
    // 接收服务端数据时触发事件
    this.ws.onmessage = function(evt) {
      var data = JSON.parse(event.data)
      if (!data.v) {
        return
      }
      const val = JSON.parse(data.v)
      const time = []
      if (val.data) {
        var t = new Date(parseInt(val.time) * 1000)
        console.log('t', t)
        time.push(t)
        for (var i = 0; i < time.length; i++) {
          if (time.length > 10) {
            time.shift()
          }
        }
        console.log('time', time)
        // this.option.xAxis.data = time;
        // this.chart.setOption(this.option)
      }
    }

    // 断开 web socket 连接成功触发事件
    this.ws.onclose = function() {
      alert('连接已关闭...')
    }
  },
  methods: {
    // 树节点,磁贴点击
    selectclass(data) {
      console.log('11111data', data)
      // const id = this.value.id;
      // 建立 web socket 连接成功触发事件
      // this.ws.onopen = function () {
      // 使用 send() 方法发送数据
      var request = JSON.stringify({
        command: 'SUBSCRIBE',
        content: '*' + '.' + 'NJYC' + '.*'
      })
      console.log('11111', request)
      this.ws.send(request)
      // };

      console.log('end')
      // 表格数据
      this.tableData = [
        {
          time: '2016-05-02',
          name: 'A相温度',
          id: 'ta',
          company: '°',
          value: '30'
        },
        {
          time: '2016-05-04',
          name: 'B相温度',
          company: '°',
          id: 'tb',
          value: '30'
        },
        {
          time: '2016-05-01',
          name: 'C相温度',
          company: '°',
          id: 'tc',
          value: '30'
        },
        {
          time: '2016-05-03',
          name: 'A相功率因数',
          company: '%',
          id: 'pfa',
          value: '30'
        }
      ]
      // chart 数据
      this.echartvalue = [
        {
          name: 'A相温度',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'B相温度',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'C相温度',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'A相功率因数',
          type: 'line',
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
      this.option.series = this.echartvalue
      this.chart.setOption(this.option)
    },
    // 点击表格
    async selectitem(data) {
      for (const a in this.echartvalue) {
        if (this.echartvalue[a].name === data.name) {
          this.option.legend.selected[this.echartvalue[a].name] = true
          this.option.legend.data = [this.echartvalue[a].name]
        } else {
          this.option.legend.selected[this.echartvalue[a].name] = false
        }
      }
      this.option.legend.data = data.name
      this.chart.setOption(this.option)
    },
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart)
      // 把配置和数据放这里
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['A相温度', 'B相温度', 'C相温度', 'A相功率因数'],
          selected: {
            'A相温度': true,
            'B相温度': true,
            'C相温度': true,
            'A相功率因数': true
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          // {
          //   name: 'A相温度',
          //   type: 'line',
          //   stack: '总量',
          //   data: [120, 132, 101, 134, 90, 230, 210]
          // },
          // {
          //   name: 'B相温度',
          //   type: 'line',
          //   stack: '总量',
          //   data: [220, 182, 191, 234, 290, 330, 310]
          // },
          // {
          //   name: 'C相温度',
          //   type: 'line',
          //   stack: '总量',
          //   data: [150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //   name: 'A相功率因数',
          //   type: 'line',
          //   stack: '总量',
          //   data: [320, 332, 301, 334, 390, 330, 320]
          // }
        ]
      }
      this.chart.setOption(this.option)
    }
  }
}
</script>
